<template>
  <div class="news_detail">
    <!-- 轮播图 -->
    <el-carousel  class="lunbotu" arrow="never">
        <el-carousel-item v-for="(item,index) in forData" :key="index">
            <img :src="item.url" alt="">
        </el-carousel-item>
    </el-carousel>
    <!-- 定位栏 -->
    <div class="contentHeaderCon">
        <h1 class="conHeaderTitle1">{{companyText1}}</h1>
        <h1 class="conHeaderTitle2">{{companyText2}}</h1>
    </div>
    <!-- 新闻列表头部 -->
    <div class="detail_title_container">
      <div class="detail_title">
        <div class="detail_crumbs">
          <div class="crumbs_item" v-for="(item,index) in crumbsList" :key="index">
            <router-link :to="item.path" class="crumbs_link">{{item.name}}</router-link>
            <span class="crumbs_arrow">&gt;</span>
          </div>
          <div class="crumbs_article_title">{{articleTitle}}</div>
        </div>
      </div>
    </div>
    <!-- 新闻详情 -->
    <div class="news_info_container">
      <!-- 新闻列表头部 -->
      <div class="boxText">
        <div class="titles">{{title}}</div>
        <div class="text">{{time}}</div>
      </div>
      <div class="news_info" v-html="articleContent"></div>
    </div>
  </div>
</template>

<script>
import {ConsultingDataText,getWebsiteOtherTuData} from '@/api/getData'
import Banner from "@/components/Banner";
export default {
  components: {
    Banner,
  },
  data(){
    return {
      crumbsList:[
        {name:'首页',path:'/home'},
        {name:'资讯动态', path:'/news'},
      ],
      // 显示在面包屑哪里的文章标题
      articleTitle:'湖北省委书记一行莅临好莱客汉川生产基地考察调研',
      // 文章内容富文本
      articleContent:'123123154',
      forData:[],
      companyText1:'',
      companyText2:'',
      title:'',
      text:'',
      time:''
    }
  },
  created(){
    this.getWebsiteOtherTuDataList()
    this.ConsultingDataTextList(this.$route.query.id)
    console.log(this.$route);
    console.log(this.$route.query.id);
    console.log(this.$route.query.names);
    if (this.$route.query.names == undefined || this.$route.query.names==null || this.$route.query.names=='') {
      
    } else {
      this.crumbsList.push({name:this.$route.query.names,path:'/news'})
    }
   
  },
  methods:{
    // 获取官网banner图
    async getWebsiteOtherTuDataList(){
      try {
        const res = await getWebsiteOtherTuData({}).then(res=>{
            console.log('官网数据',res);
            this.forData=res.data.bannerUrl
            this.companyText1=res.data.list[0].theme
            this.companyText2=res.data.list[0].subtitle
        })
      } catch (error) {}
    },
    // 获取详情
    async ConsultingDataTextList(id){
      try {
        const res = await ConsultingDataText({advisory_id:id}).then(res=>{
          console.log('详情数据',res);
          let e=res.data.text
          if (e == null) {
            return
          }
          e = e.replace(/&lt;/g, '<');
          e = e.replace(/&gt;/g, '>');
          e = e.replace(/&quot;/g, '"');
          e = e.replace(/&amp;/g, ' ');
          e = e.replace(/&mdash;/g, '—');

          e = e.replace(/lt;/g, '<');
          e = e.replace(/gt;/g, '>');
          e = e.replace(/quot;/g, '"');
          e = e.replace(/amp;/g, ' ');


          e = e.replace(/img/g, "img style='width:100%;height:auto'");
          e = e.replace(/<p>/g, "<p style='width:100%;height:auto'>");
          this.articleContent=e
          this.text=res.data.subtitle
          this.title=res.data.title
          this.articleTitle=res.data.title
          this.time=res.data.creation_time
        })
      } catch (error) {}
    }
  }
};
</script>

<style scoped lang="scss">
/* 定位内容 */
.contentHeaderCon{
  position: absolute;
  top: 15%;
  left: 10%;
  z-index: 100;
}
.conHeaderTitle1{
  font-size: 45px;
  color: #FFFFFF;
}
.conHeaderTitle2{
  font-size: 57px;
  color: #FFFFFF;
}


.news_detail {
  .detail_title_container {
    width: 100%;
    height: 120px;
    box-shadow: 0 5px 5px #eeeeee;
    .detail_title {
      width: 1450px;
      margin: 0 auto;
      height: 120px;
      line-height: 120px;
      .detail_crumbs {
        .crumbs_item{
          display: inline-block;
          .crumbs_link{
            color: #004DA1;
          }
          .crumbs_arrow{
            margin: 0 10px;
          }
        }
        .crumbs_article_title{
          display: inline-block;
        }
      }
    }
  }

  .news_info_container{
    background-color: #f9f9f9;
    padding: 36px 200px 0 200px;
    .boxText{
      text-align: center;
      
      line-height: 60px;
      background-color: #FFFFFF;
      padding: 36px 200px 0 200px;
      .titles{
      font-size: 32px;
      color: #004EA2;
      }
      .text{
        color: #000000;
        font-size: 16px;
        border-bottom: 0.11111rem  solid #F0F0F0;
      }
    }
    .news_info{
      padding: 36px 200px 0 200px;
      background-color: #fff;
      text-align: left;
      font-size: 18px;
      line-height: 30px;
      // font-weight: bold;
      color: #5B5B5B;
    }
  }
}
</style>